<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>文章列表</span>
            </div>
        </template>
        <el-table :model="tableData" :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="#" width="120" />
            <el-table-column prop="cate_1st_name" label="一级分类" width="100" />
            <el-table-column prop="cate_2nd_name" label="二级分类" />
            <el-table-column prop="main_photo" label="主图" width="120">
                <template #default="scope">
                    <el-image style="width: 50px; height: 40px" v-model:src="scope.row.main_photo" />
                </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="180" />
            <el-table-column prop="tags" label="标签" width="180">
                <template #default="scope">
                    <el-tag class="ml-2" v-for="(item) in scope.row.tags" type="success" style="margin-right:5px">
                        {{item.name}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="发布日期" width="120" />
            <el-table-column prop="update_time" label="更新日期" width="120" />
            <el-table-column prop="operation" label="操作" width="180">
                <template #default="scope">
                    <el-row>
                        <el-col :span="8">
                            <el-link :href="`#/Aritcle/edit/${scope.row.id}`">
                                <el-button size="small" type="primary" plain>编辑</el-button>
                            </el-link>
                        </el-col>
                        <el-col :span="8">
                            <el-button @click="opentag(scope.$index)" size="small" type="success" plain>标记</el-button>
                        </el-col>
                        <el-col :span="8">
                            <el-button @click="remove(scope.$index)" size="small" type="danger" plain>删除</el-button>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-dialog v-model="dialogTableVisible" title="标记文章">
        <div class="tag-input">
            <el-space>
                <el-tag v-for="item in formtag" :key="item.id" :disable-transitions="false" closable class="ml-2"
                    @close="closetag(item)" type="success">{{item.name}}
                </el-tag>
            </el-space>
        </div>
        <el-space>
            <el-tag v-for="(item,index) in form" @click="selectTag(index,item.name)" class="ml-2" type="success">
                {{item.name}}</el-tag>
        </el-space>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="save()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from 'vue';
import aritcle from '@/api/aritcle';
import tag from '@/api/tag';
// import { ElMessage } from 'element-plus';
const tableData = ref([]);
async function loadList() {
    let { status, msg, data } = await aritcle.list();
    if (status) {
        tableData.value = data;
    } else {
        ElMessage(msg);
    }
}
loadList();
let remove = async (index) => {
    // console.log(tableData.value[index].id);
    let id = tableData.value[index].id;
    let { status, msg } = await aritcle.remove({ id });
    if (status) {
        tableData.value.splice(index, 1);
        ElMessage.success(msg);
    } else {
        ElMessage.error(msg);
    }
}
//缓存index
let tagIndex = ref();
// 缓存当前id
let tagId = ref();
//已选的tag
let formtag = ref([]);
let form = ref();
let dialogTableVisible = ref(false)
// 打开弹窗
let opentag = async (index) => {
    // 打开弹窗
    dialogTableVisible.value = true;
    tagIndex.value = index;
    tagId.value = tableData.value[index].id;
    let { status, data } = await tag.list();
    // console.log(tableData.value[index].tags);
    //深拷贝还原表单
    formtag.value = JSON.parse(JSON.stringify(tableData.value[index].tags));
    form.value = data;
}
//选择添加tag
let selectTag = (index, name) => {
    if (formtag.value.findIndex((item) => item.name == name) == -1) {
        // console.log({...form.value[index]});
        formtag.value.push({ ...form.value[index] });
    }
}
//删除tag
let closetag = (able) => {
    // console.log(able);
    formtag.value.splice(formtag.value.indexOf(able), 1)
}
let save = async () => {
    dialogTableVisible.value = false;
    let tags = []
    formtag.value.forEach((item) => {
        tags.push(item.id);
    })
    let { status, msg } = await aritcle.addtag({ id: tagId.value, tags });
    if (status) {
        // 更新DOM
        tableData.value[tagIndex.value].tags = formtag.value;
        ElMessage.success(msg);
    }
}
</script>
<style>
.tag-input {
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    height: 40px;
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    padding-left: 10px;
}

.box-card {
    width: 100%;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}
</style>
  